{% extends "GairalFrankCVBundle::layout.html.twig" %}

{% block bodyCV %}
<section id="experience">
    {% if listExperience %}
        {% for experience in listExperience %}
            {% if not experience.dateOut %}
                {%  set expDates = experience.dateIn|date('Y F') ~ ' - Present' %}
            {% else %}
                {% if experience.dateIn|date('Y') == experience.dateOut|date('Y') %}
                    {%  set expDates = experience.dateIn|date('Y F') ~ ' - ' ~ experience.dateOut|date('F') %}
                {% else %}
                    {%  set expDates = experience.dateIn|date('Y F') ~ ' - ' ~ experience.dateOut|date('Y F') %}
                {% endif %}
            {% endif %}
        <div class="well well-large" itemscope itemtype="http://data-vocabulary.org/Organization">
            <div class="media"
                 id="xpSkills_{{ experience.id }}"
                 data-content="
                 {% for skill in experience.skills %}
                 &lt;span class=&quot;label label-success&quot;&gt;{{ skill.name }}&lt;/span&gt;
                 {% endfor %}
                 ">
            {% if experience.image %}
                <img class="pull-left" src="{{ asset(experience.image.webPath) }}" alt="{{ experience.name }}"/>
            {% endif %}
                <div class="media-body">
                    <h2 class="media-heading">
                            {{ expDates }}
                        </h2>
                        <span class="label label-important" itemprop="name">{{ experience.name }}</span>
                        <span class="label label-info" itemprop="locality">{{ experience.place }}</span>
                        <a href="{{ experience.website|raw }}" onclick="window.open('{{ experience.website|raw }}/');
                                return false;" class="label label-info" itemprop="url">{{ experience.website|raw }}</a>

                           <p>{{ experience.description }}</p>
                        </div>
                    </div>

                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle btn btn-info" data-toggle="collapse" href="#{{ experience.id }}Exp">
                                Accomplishments
                                <i class="icon-white icon-chevron-down"></i>
                            </a>    
                        </div>
                        <div id="{{ experience.id }}Exp" class="accordion-body collapse">
                            <div class="accordion-inner">
                                        {{ experience.accomplishments|raw }}
                                </div>
                            </div>
                        </div>
                    </div>
        {% else %}
                    no experience
        {% endfor %}
    {% endif %}
                </section>
{% endblock %}

{% block js %}
                <script type="application/javascript">
                    $(function () { 
        {% for experience in listExperience %}
            {% if experience.skills|length > 0 %}
                    $("#xpSkills_{{ experience.id }}").popover({trigger: 'hover', html: true, placement: 'bottom'});
            {% endif %}
        {% endfor %}
                    });
                </script> 
{% endblock %}